<!--
-->
<template>
    <vxe-modal v-model="visible" :height="layout.modalHeight(680)" :min-width="layout.modalMinWidth(600)" :position="{top: '60px'}" :title="title" :width="layout.modalWidth(800)" destroy-on-close resize show-footer show-maximize @close="cancelClick">
        <el-form class="search-bar" inline>
            <el-form-item label="名称">
                <el-input v-model="requestBody.name" placeholder="请输入名称" clearable />
            </el-form-item>
<!--            <el-form-item label="编号">-->
<!--                <el-input v-model="requestBody.code" placeholder="请输入编号" clearable />-->
<!--            </el-form-item>-->
            <el-form-item>
                <el-button @click="searchClicked" type="primary">查询</el-button>
            </el-form-item>
        </el-form>
        <div v-loading="isLoading" class="list">
            <div v-for="item in state.list" :key="item.id" class="cell" :class="{'selected': state.selectedId === item.id}" @click="select(item)">
                <div class="image">
                    <img :src="item.image" alt=""/>
                </div>
                <div class="name">
                    <el-text line-clamp="2">
                        {{ item.name }}
                    </el-text>
                </div>
            </div>
        </div>
        <div class="page-config">
            <vxe-pager v-model:current-page="requestParams.pageIndex" v-model:page-size="requestParams.pageSize" :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']" :page-sizes="pageConfig.sizes" :total="pageConfig.total" background size="mini" @page-change="onPageChange" />
        </div>
        <template #footer>
            <el-button @click="cancelClick">取消</el-button>
            <el-button :loading="isSubmitting" type="primary" @click="beforeSubmit">
                确定
            </el-button>
        </template>
    </vxe-modal>
</template>

<script setup>
import {ref, reactive, computed, onMounted} from "vue";
import {FormMixins} from "@/utils/FormMixins";
import * as api from "../api.js";

const {ELForm, visible, title, layout, isLoading, isSubmitting, state, setOptions, submitSuccess, cancelClick} = FormMixins();
const {$message} = window;

const Model = () => {
    return {}
}


// 请求query参数
const requestParams = reactive({
    orderCol: "sort",
    isDesc: false,
    pageIndex: 1,
    pageSize: 10,
});
// 请求body参数
const requestBody = reactive({
    name: null,
})

// 分页配置
const pageConfig = reactive({
    total: 0,
    sizes: [10, 20, 50, 100, 200]
})

// 点击搜索
function searchClicked() {
    console.primary("搜索条件: ", requestBody)
    reload(true);
}

// 查询列表
async function loadList() {
    const params = {
        ...requestParams
    };
    const body = {
        ...requestBody
    };
    isLoading.value = true;
    const {success, data} = await api.GetProgramReportPageList(params, body);
    isLoading.value = false;
    if (!success) return 0;
    const {items, totalCount} = data;
    state.list = items;
    pageConfig.total = totalCount;
}

// 分页事件
function onPageChange({type}) {
    if (type === "current") {
        loadList()
    }
    if (type === "size") {
        reload(true)
    }
}

// 刷新
function reload(resetPageIndex) {
    if (resetPageIndex) requestParams.pageIndex = 1;
    loadList()
}

function select(item) {
    state.selectedId = item.id;
    state.model.jsonReport = item.content;
}

// 表单显示
async function show(config) {
    setOptions(config);
    state.model = Model();
    state.model = {...state.model, ...state.options}
    // 初始化数据
    state.list = [];
    requestParams.pageSize = 10;
    requestBody.name = null;
    requestBody.code = null;
    reload(true);
}

// 校验表单
function beforeSubmit() {
    if (state.model.jsonReport) {
        submit()
    } else {
        $message.warning("请先设置打印模板")
    }
}

// 提交表单
async function submit() {
    $message.success("操作成功")
    submitSuccess(state.model.jsonReport)
}

onMounted(() => {
})
defineExpose({
    show
})
</script>


<style lang="scss" scoped>
.list {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    height: 460px;

    .cell {
        width: 140px;
        height: 200px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        border-radius: 6px;
        margin-right: 10px;
        margin-bottom: 10px;
        border: 1px solid #ccc;
        box-sizing: border-box;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);

        .image {
            width: 100%;
            height: 140px;
            box-sizing: border-box;
            padding: 10px 20px;
            overflow: hidden;

            img {
                width: 100%;
                height: auto;
                transition: transform 0.3s ease;
            }
            &:hover {
                img {
                    transform: scale(1.4) translateY(20px);
                }
            }
        }


        .name {
            box-sizing: border-box;
            width: 100%;
            height: 40px;
            font-size: 16px;
            font-weight: bold;
            padding: 10px;
            //border-top: 1px solid #ccc;
        }
    }
    .selected {
        border: 1px solid var(--el-color-primary);
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
    }
}
</style>
